<template>
  <div
    style="
      width: 880px;
      height: 200px;
      background: #f5f7fa;
      border: 1px solid #e4e7ed;
      border-radius: 8px;
    "
  >
    <div class="w-[848px] h-[160px]" style="position: relative">
      <div class="flex" style="position: absolute; top: -23px; left: 72px">
        <div
          v-for="item in 49"
          :key="item"
          style="width: 16px; height: 16px; font-size: 14px; color: #606266"
          ref="box"
        >
          {{
            item % 2 === 1
              ? (item - 1) / 2 < 10
                ? "0" + (item - 1) / 2
                : (item - 1) / 2
              : ""
          }}
        </div>
      </div>
      <div style="display: flex; margin-top: 30px; margin-bottom: 5px">
        <div style="width: 80px; height: 6px" />
        <div class="flex" style="border-right: 1px solid #409eff">
          <div
            v-for="item in 48"
            :key="item"
            style="
              width: 16px;
              height: 8px;
              border-bottom: 1px solid #409eff;
              border-left: 1px solid #409eff;
            "
            ref="box"
          />
        </div>
      </div>

      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 20px;
        "
        v-for="(item, index) in Week"
        :key="item"
      >
        <div
          style="
            width: 80px;
            height: 15px;
            font-size: 14px;
            line-height: 15px;
            color: #606266;
            text-align: center;
          "
        >
          {{ item }}
        </div>
        <div>
          <div class="flex" style="border-right: 1px solid #c0c4cc">
            <div
              v-for="(item, i) in 48"
              :key="item"
              style="
                width: 16px;
                height: 16px;
                border-top: 1px solid #c0c4cc;
                border-bottom: 1px solid #c0c4cc;
                border-left: 1px solid #c0c4cc;
              "
              ref="box"
              :style="{
                backgroundColor: flagArr[index][i] ? '#409eff' : '#f0f2f5'
              }"
              @click="fn(index, i)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const box = ref<any>(null);
const flagArr = ref<Array<any>>(
  Array.from({ length: 7 }, () => new Array(48).fill(false))
);
const arr = ref<Array<any>>(Array.from({ length: 7 }, () => []));
const Week = ref<string[]>([
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日"
]);
const fn = (index: number, i: any) => {
  if (flagArr.value[index][i]) {
    if (arr.value[index].includes(i)) {
      arr.value[index] = [];
    }
    flagArr.value[index][i] = false;
  } else {
    if (arr.value[index].length === 1) {
      arr.value[index].push(i);
      arr.value[index] = arr.value[index].sort((a, b) => {
        return a - b;
      });
      flagArr.value[index].forEach((item, key) => {
        if (key >= arr.value[index][0] && key <= arr.value[index][1]) {
          flagArr.value[index][key] = true;
        }
      });
      arr.value[index] = [];
    } else {
      flagArr.value[index][i] = true;
      arr.value[index].push(i);
    }
  }
  console.log(flagArr.value);
};
</script>

<style lang="scss">
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}
</style>
